<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css">
      body {
        overflow:hidden;
      }
      #rules {
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 20px;
        resize:none;
        font-size: 14px;
        font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
      }
    </style>
  </head>
  <body>
    <div id="rules"></div>
    <script>
      'use strict';
      function getURLParameter(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
      }
      window.onload = function() {
        var rules = getURLParameter('rules');
        rules = JSON.parse(rules);
        var i, text = '';
        text += '<h3>Input rules</h3>\n';
        text += '<ul>\n';
        for (i in rules.input) {
          var input = rules.input[i];
          text += '<li>Input <b>' + input.port + '</b> ports &rarr; FPGA pin <b>' + input.pin + '</b></li>\n';
        }
        text += '</ul>\n';
        text += '<h3>Output rules</h3>\n';
        text += '<ul>\n';
        for (i in rules.output) {
          var output = rules.output[i];
          text += '<li>FPGA pin <b>' + output.pin + '</b> &rarr; value <b>' + output.bit + '</b></li>\n';
        }
        text += '</ul>\n';
        if (text) {
          document.getElementById('rules').innerHTML = text;
        }
        else {
          document.getElementById('rules').style.visibility = 'hidden';
        }
      };
    </script>
  </body>
</html>
